<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工作经验与人数分布图</title>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/theme/vintage.js"></script>
</head>
<body>
<div class="chart" style="width: 800px;height: 600px;margin: auto"></div>
<script>
    // 初始化echarts
    var myCharts = echarts.init(document.querySelector('.chart'),'vintage')
    // 获取视图函数传入数据并转换成json格式
    var exp_date = {{ exp_date|tojson }}
    var count = {{ count|tojson }}
    var option = {
        title:{
          text:'工作经验与人数分布',
          textStyle:{
              fontSize:21,
              fontFamily:'楷体'
          }
        },
        xAxis:{
           type:'category',
           data:exp_date,
           axisLabel:{
               interval:0,
               rotate:40,
               margin:10
           }
        },
        yAxis:{
            type:'value',
            scale:true
        },
        tooltip:{
          trigger:'item',
          triggerOn:'mousemove',
          formatter:function (rst){
              return '工作经验：'+rst.name+'<br>'+'所需岗位：'+rst.value+'个'
          }
        },
        legend:{
            name: ['人数']
        },
        series:[
            {
                name:'人数',
                type:'bar',
                data:count,
                label:{
                    show:true,
                    rotate: 40,
                    position:'top',
                    distance:10
                },

            }
        ]
    }
    myCharts.setOption(option)
</script>
</body>
</html>